<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <el-button @click="totw">操作按钮</el-button>
      <div ref="tw_chart" style="height: 320px"></div>
    </el-card>


  </div>
</template>


<script>
import * as echarts from "echarts";
import { twChartsDaily } from "@/api/tw/tw";

export default {
  name: "twcharts",
  data() {
    return {
      twData:{
        userId:1,
        days:3
      },
      name: "",
      tw_chart: null,
      tw_chart_option: {
        grid: {
          left: '0%', // 设置图表距离容器左侧的距离
          top:"30%",
          bottom:"1%",
          containLabel: true // 保证标签不会被裁剪或溢出
        },
        color: ['#f16331'], // 自定义柱状图和折线图的颜色
        title: {
          text: '马洪哲的体温变化'
        },
        tooltip: {},
        legend: {
          data: ['今天','近三天','近七天']
        },
        xAxis: {
          data: ["00:00-02:00", "02:00-04:00", "04:00-06:00", "06:00-08:00", "08:00-10:00", "10:00-12:00", "12:00-14:00", "14:00-16:00", "16:00-18:00", "18:00-20:00", "20:00-22:00", "22:00-24:00"],
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 使用箭头
            symbolSize: [5, 10] // 箭头大小
          }
        },
        yAxis: {
          name: '体温 (℃)',
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 使用箭头
            symbolSize: [5, 10] // 箭头大小
          },
          axisLabel: {
            formatter: '{value} ℃'
          },
          splitLine: {
            lineStyle: {
              color: '#e7e7e7'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
            }
          }
        },
        series: [{
          name: '今天',
          type: 'bar',
          data: [35.5, 36, 36, 36, 36.5, 36.2, 36.8, 37, 37.5, 36, 36.5, 45],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ℃';
            }
          },

          itemStyle: {
            // 使用回调函数为不同的数据设置不同的颜色
            color: function(params) {
              // params是一个包含当前数据信息的对象
              var temperature = params.value; // 获取当前柱状的数据（体温）
              if (temperature <36){
                return '#e6efd1'; // 低烧
              }
              if (temperature < 36.5 &&temperature >=36) {
                return '#75ec30'; // 正常体温，显示为浅绿色
              } else if (temperature >= 36.5 && temperature < 37.5) {
                return '#f46d25'; // 轻微发热，显示为黄色
              } else {
                return '#ff0016'; // 发热，显示为红色
              }
            }
          }
        },
        {
          name: '近三天',
          type: 'bar',
          data: [35.5, 36, 36, 36, 36.5, 36.2, 36.8, 37, 37.5, 36, 36.5, 45],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ℃';
            }
          },

          itemStyle: {
            // 使用回调函数为不同的数据设置不同的颜色
            color: function(params) {
              // params是一个包含当前数据信息的对象
              var temperature = params.value; // 获取当前柱状的数据（体温）
              if (temperature <36){
                return '#e6efd1'; // 低烧
              }
              if (temperature < 36.5 &&temperature >=36) {
                return '#75ec30'; // 正常体温，显示为浅绿色
              } else if (temperature >= 36.5 && temperature < 37.5) {
                return '#f46d25'; // 轻微发热，显示为黄色
              } else {
                return '#ff0016'; // 发热，显示为红色
              }
            }
          }
        },
        {
          name: '近七天',
          type: 'bar',
          data: [35.5, 36, 36, 36, 36.5, 36.2, 36.8, 37, 37.5, 36, 36.5, 45],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ℃';
            }
          },

          itemStyle: {
            // 使用回调函数为不同的数据设置不同的颜色
            color: function(params) {
              // params是一个包含当前数据信息的对象
              var temperature = params.value; // 获取当前柱状的数据（体温）
              if (temperature <36){
                return '#e6efd1'; // 低烧
              }
              if (temperature < 36.5 &&temperature >=36) {
                return '#75ec30'; // 正常体温，显示为浅绿色
              } else if (temperature >= 36.5 && temperature < 37.5) {
                return '#f46d25'; // 轻微发热，显示为黄色
              } else {
                return '#ff0016'; // 发热，显示为红色
              }
            }
          }
        },
        ]

      }
    }
  },
  created() {
    this.get_tw_chart()
  },
  methods: {
    //前往体温详情
    totw(){
      alert(1)
      this.$router.push('/tw/tw/index');
    },
    get_tw_chart() {
      this.$nextTick(() => {
        this.tw_chart = echarts.init(this.$refs.tw_chart, "macarons");
        this.tw_chart.setOption(this.tw_chart_option)
        window.addEventListener("resize", () => {
          this.tw_chart.resize();
        });
      })
    },
    //获取图表信息
    getData(){
      twChartsDaily(this.twData).then(res =>{
        console.log(res)
      })
    }
  },
mounted() {
  this.getData()
},
}
</script>


<style scoped lang="scss">

</style>
